/**
 * Created by lixin on 2019-11-21
 */
import Taro, {Component} from '@tarojs/taro'
import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components'
/**
 * 由于 app.js 添加的样式文件 在小程序上只能影响 page 样式,不能影响 component 的样式，所以在使用自定义组件时，你可能需要再次引入
 */
import 'taro-ui/dist/style/components/flex.scss'
import {AtIcon, AtSearchBar, AtTag} from "taro-ui";
import './banner.less'


export default class Banner extends Component {

  constructor(props) {
    super(props);

    this.state = {}
  }

  onClick = () => {
    console.log('分类')

    /* Taro 不能跳转 tabBar 页面 */
    Taro.navigateTo({
      url: '/pages/classify/classify'
    }).catch((error) => {
      //console.log(error)
      /* 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 */
      /* 调用微信原生api */
      wx.switchTab({url: '/pages/classify/classify'})
    })

  }

  render() {

    const _url = 'http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'
    return (
      <View className='index-head-content'>

        <View className='index-head-search'>
          <View className='at-row'>
            <View className='at-col at-col-2 index-head-button' onClick={this.onClick}>
              <AtIcon value='menu' size='20' color='#fff'></AtIcon>
              <Text className='index-head-classification'>
                分类
              </Text>
            </View>
            <View className='at-col at-col-10'>
              <AtSearchBar/>
            </View>
          </View>
        </View>

        <View className='index-head-hot'>
          <View className='at-row'>
            <View className='at-col'>
              <Text className='index-head-hot-text'>
                热搜
              </Text>
            </View>
            <View className='at-col'>
              <AtTag size='small' circle>佳能单反</AtTag>
            </View>
            <View className='at-col'>
              <AtTag size='small' circle>拍立得相机</AtTag>
            </View>

            <View className='at-col'>
              <AtTag size='small' circle>运动相机</AtTag>
            </View>

            <View className='at-col'>
              <AtTag size='small' circle>佳能镜头</AtTag>
            </View>
          </View>
        </View>
        <Swiper
          className='swiper'
          indicatorColor='rgba(0,0,0,.3)'
          indicatorActiveColor='#FFF'
          vertical={false}
          circular={true}
          indicatorDots
          autoplay>
          <SwiperItem className='swiper-item'>
            <Image
              className='swiper-img'
              src={_url}
              alt=''
              lazyLoad={true}
            />
          </SwiperItem>
          <SwiperItem className='swiper-item'>
            <Image
              className='swiper-img'
              src={_url}
              alt=''
              lazyLoad={true}
            />
          </SwiperItem>
          <SwiperItem className='swiper-item'>
            <Image
              className='swiper-img'
              src={_url}
              alt=''
              lazyLoad={true}
            />
          </SwiperItem>
        </Swiper>

      </View>
    )
  }
}
